<template>
  <el-dropdown>
    <div class="avatar">
      <el-avatar v-if="store.state.user != null" :src="store.state.user.avatar" />
      <el-avatar v-else src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      <span class="userName" v-if="store.state.user != null">{{ store.state.user.name }}</span>
      <span class="userName" v-else>游客</span>
    </div>
    <template #dropdown>
      <el-dropdown-menu v-if="store.state.user == null">
        <el-dropdown-item @click="showDialog('login')">登录</el-dropdown-item>
        <el-dropdown-item @click="showDialog('register')">注册</el-dropdown-item>
      </el-dropdown-menu>
      <el-dropdown-menu v-else>
        <el-dropdown-item @click="jump('/index')">首页</el-dropdown-item>
        <el-dropdown-item v-if="store.state.user.pos == '管理员'" @click="jump('/admin')">后台管理</el-dropdown-item>
        <el-dropdown-item @click="showBill">我的账单</el-dropdown-item>
        <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <!-- 登录注册弹出框 -->
  <el-dialog v-model="dialogVisible" center show-close class="dialog" width="30%">
    <div class="login" v-if="activeName == 'login'">
      <h4 class="title">登录</h4>
      <el-form label-position="right" label-width="100px" :model="loginForm" style="max-width: 460px">
        <el-form-item label="账户" class="formItem">
          <el-input v-model="loginForm.userName" />
        </el-form-item>
        <el-form-item label="密码" class="formItem">
          <el-input type="password" show-password v-model="loginForm.pwd" />
        </el-form-item>
        <el-link type="danger" class="text" @click="activeName = 'register'">没有账户？注册</el-link>
        <div class="bottom">
          <el-button type="primary" @click="userLogin">登录</el-button>
        </div>
      </el-form>
    </div>
    <div class="register" v-if="activeName == 'register'">
      <h4 class="title">注册</h4>
      <el-form label-position="right" label-width="100px" :model="registerFrom" style="max-width: 460px">
        <el-form-item label="头像" class="formItem">
          <img-upload v-model:picture="registerFrom.avatar" />
        </el-form-item>

        <el-form-item label="账户" class="formItem">
          <el-input v-model="registerFrom.userName" />
        </el-form-item>
        <el-form-item label="密码" class="formItem">
          <el-input type="password" v-model="registerFrom.pwd" />
        </el-form-item>
        <el-form-item label="确认密码" class="formItem">
          <el-input type="password" v-model="registerFrom.confirmPwd" />
        </el-form-item>
        <el-form-item label="名称" class="formItem">
          <el-input v-model="registerFrom.name" />
        </el-form-item>
        <el-form-item label="邮箱" class="formItem">
          <el-input v-model="registerFrom.email" />
        </el-form-item>
        <el-form-item label="电话" class="formItem">
          <el-input v-model="registerFrom.phone" />
        </el-form-item>
        <div class="bottom">
          <el-button type="primary" @click="userRegister">注册</el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>

  <!-- 账单列表弹出框 -->
  <el-dialog v-model="indentDialogVisible" title="账单详情" width="60%">
    <div v-if="indentList.length > 0" class="table">
      <!-- 表格展示 -->
      <el-table :data="indentList" stripe style="width: 100%">
        <el-table-column prop="id" label="账单id" width="150" />
        <el-table-column prop="indentId" label="订单id" />
        <el-table-column prop="title" label="账单标题" width="180" />
        <el-table-column prop="sum" label="金额" />
        <el-table-column prop="balance" label="剩余金额" />
        <el-table-column prop="createTime" label="创建时间" width="190" />
      </el-table>
    </div>
    <div v-if="indentList.length > 0">
      <!-- 分页 -->
      <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
        :page-sizes="[10, 15, 20]" :total="pageInfo.total" :disabled="false" background
        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <!-- 空状态 -->
    <div v-if="indentList.length <= 0">
      <el-empty description="暂无数据" />
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { login, register } from '@/api/user.js';
import { pageList } from '@/api/bill.js';
import ImgUpload from '@/components/ImgUpload.vue';
import { ElMessage } from "element-plus";
const router = useRouter();
const store = useStore();

const dialogVisible = ref(false);
const loginForm = reactive({
  userName: null,
  pwd: null
});

// 分页相关数据
const pageInfo = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 10,
})

// 注册表单
const registerFrom = reactive({
  name: null,
  userName: null,
  avatar: null,
  pwd: null,
  email: null,
  phone: null,
  confirmPwd: null
})

const activeName = ref('login')

const indentDialogVisible = ref(false);
const indentList = ref([]);

// 显示订单列表
const showBill = async () => {
  indentDialogVisible.value = true;
  const response = await pageList(pageInfo);
  indentList.value = response.data.data.list;
  pageInfo.total = response.data.data.total;
}

// 登出
const logout = () => {
  // 删除信息
  store.dispatch('logout')
  // 跳转到首页
  router.push('/index')
}

// 注册
const userRegister = async () => {
  // 判断密码和确认密码是否相同
  if (registerFrom.pwd != registerFrom.confirmPwd) {
    ElMessage({
      message: "请保证两次输入的密码一致！",
      type: "warning"
    });
    return;
  }
  // 请求注册
  const response = await register(registerFrom)
  if (response.data.state == 200) {
    ElMessage({
      message: "注册成功!",
      type: "success"
    });
    // 清空表单数据
    claerRegisterFrom();
    // 跳转到登录页面
    activeName.value = 'login';
  }
}

// 清空表单数据
const claerRegisterFrom = () => {
  registerFrom.avatar = null;
  registerFrom.confirmPwd = null;
  registerFrom.avatar = null;
  registerFrom.pwd = null;
  registerFrom.email = null;
  registerFrom.phone = null;
  registerFrom.name = null;
}

// 登录
const userLogin = async () => {
  const response = await login(loginForm);
  if (response.data.state == 200) {
    const token = response.data.data
    store.dispatch('userLogin', token);
    dialogVisible.value = false;
  }
}

/**
 * 显示弹出框
 */
const showDialog = async (type) => {
  // 显示对应的标签栏
  activeName.value = type;
  // 显示弹框
  dialogVisible.value = true;
}

const jump = (path) => {
  router.push(path)
}


// 处理页数发生改变的方法
const handleSizeChange = async (pageSize) => {
  pageInfo.pageSize = pageSize;
  await showBill();
}

// 页码大小发生改变
const handleCurrentChange = async (pageNum) => {
  pageInfo.pageNum = pageNum;
  await showBill();
}

</script>

<style scoped>
.text {
  margin-left: 240px;
}

.bottom {
  width: 100%;
  margin: auto;
  text-align: center;
}

.formItem {
  width: 340px;
}

.title {
  font-size: 24px;
  text-align: center;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}

.avatar {
  margin-top: 40px;
  position: relative;
  width: 150px;
  cursor: pointer;
  margin-left: 40px;
}

.item {
  width: 150px;
}

.userName {
  position: absolute;
  left: 50px;
  top: 6px;
  font-size: 20px;
}
</style>